<template>
  <div class="ding">

    <div class="li"
         v-for="(item,index) in datas"
         :key="index">
      <img :src='"https://elm.cangdu.org/img/"+datas[index].image_path'
           alt=""
           @click="lit(index)">
      <div class="data">

        <div class="name">
          {{datas[index].name}}
        </div>
        <div class="description">
          {{datas[index].description}}
        </div>
        <div class="tips">
          月售{{datas[index].month_sales}}份
          好评率{{datas[index].satisfy_rate}}%
        </div>
        <div class="price">
          ￥{{datas[index].specfoods[0].price}}
        </div>
      </div>

      <div>
        <span class="model">
          <div class="jian"
               @click="jian(index)">
            -
          </div>
          <div class="num"
               ref="number">0</div>
          <div class="jia"
               @click="dianji(index)">
            +
          </div>

        </span>
      </div>
    </div>
    <div class="foot">
      <div class="left">
        <van-action-sheet v-model="show"
                          :overlay="flase"
                          title="购物车">
          <div class="content">
            <div class="gouwu"
                 v-for="(item,index) in gwc"
                 :key="index">
              <div class="gname">{{item.name}}</div>
            </div>
          </div>
        </van-action-sheet>
        <van-badge :content="1">
          <div class="child" />

          <div class="che"
               @click="show=true">

            <i class="iconfont icon-gouwuchekong"> </i>

          </div>
        </van-badge>
        <div class="qian">

          <div class="qian1">{{total}}</div>

          <div class="qian2">配送费￥5</div>
        </div>
      </div>
      <div class="right"
           @click="order">
        还差￥20起送
      </div>
    </div>
  </div>

</template>
<script >
import Vue from 'vue';
import { ActionSheet } from 'vant';
import { Badge } from 'vant';

Vue.use(Badge)
Vue.use(ActionSheet);
export default {
  name: 'Infors',
  props: {
    datas: {}
  },
  data: function () {
    return {
      show: false,
      gwc: [],
    }
  },

  computed: {
    total: function () {
      let totala = 0;
      for (let i in this.gwc) {
        totala += this.gwc[i].price * this.gwc[i].num
      }
      return totala;
    },
  },
  methods: {
    order () {
      this.$router.push({ name: 'Order' });
    },
    dianji (index) {
      let name = this.datas[index].specfoods[0].name
      let price = this.datas[index].specfoods[0].price
      let object = {}
      //gwc数组·初始状态
      //console.log((this.$refs.number)[index].innerText)
      if (this.gwc.length == 0) {
        object.name = name
        object.price = price
        object.num = 1;
        (this.$refs.number)[index].innerText = 1

        this.gwc.push(object);
      } else {
        let bool = false
        //遍历数组判断是否重复
        for (let x in this.gwc) {
          //如果名字存在单纯追加数量
          if (this.gwc[x].name == name) {
            this.gwc[x].num++;
            (this.$refs.number)[index].innerText = this.gwc[x].num
            bool = true
            break
          }
        }
        if (bool == false) {
          object.name = name
          object.price = price
          object.num = 1
          this.gwc.push(object);
          (this.$refs.number)[index].innerText = object.num
        }
      }
      console.log(this.gwc)
      // console.log(this.total)
    },
    jian (index) {
      console.log('oooo')
      let name = this.datas[index].specfoods[0].name
      let num = (this.$refs.number)[index].innerText
      for (let x in this.gwc) {
        if (this.gwc[x].name == name) {
          if (num > 0) {
            this.gwc[x].num--;
            if (this.gwc[x].num == 0) {
              this.gwc.splice(x, 1);
              (this.$refs.number)[index].innerText = 0
            } else {
              (this.$refs.number)[index].innerText = this.gwc[x].num
            }
            break
          }
        }
      }
      console.log('减少')
      console.log(this.gwc)
    },
    lit (index) {
      // alert(index)
      // console.log(this.datas[index])
      localStorage.setItem('abc', JSON.stringify(this.datas[index]))
      this.$router.push({ name: 'Shopshop' });
    }
  },
  created () {
    // console.log(this.total)
  }
}
</script>
<style lang="less" >
.description {
  color: #999;
  font-size: 12.9px;
  margin-top: 5px;
}
.tips {
  font-size: 12.9px;
  color: 333;
  margin: 10px 0;
}
.data {
  margin-left: 10px;
}
.model {
  color: white;
  // padding: 5px 8px;
  // background-color: #3190e8;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
}
.name {
  font-size: 19px;
  font-weight: 900;
  color: #333;
}
.price {
  color: #f60;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}
img {
  width: 51.75px;
  height: 51.75px;
}
.li {
  padding: 10px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  position: relative;
  // justify-content: space-between;
  width: 280px;
  border-bottom: 1px solid #f8f8f8;
}
.ding {
  width: 300px;
}
.jia {
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 50%;
  color: white;
  text-align: center;
  font-size: 18px;
  margin-right: 10px;
}
.jian {
  width: 19px;
  height: 19px;
  background-color: white;
  border: 1px solid blue;
  border-radius: 50%;
  color: blue;
  text-align: center;
  font-size: 18px;
  margin-left: 10px;
}
.num {
  width: 30px;
  height: 20px;
  text-align: center;
  color: black;
}
.foot {
  width: 100%;
  height: 48px;
  background-color: rgb(61, 61, 63);
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  .left {
    width: 250px;
    height: 48px;

    display: flex;
    justify-content: space-around;
    .che {
      width: 55px;
      height: 55px;
      background-color: rgb(61, 61, 63);
      border-radius: 50%;
      position: fixed;
      bottom: 15px;
      left: 10px;
      border: 5px solid black;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-gouwuchekong {
        font-size: 33px;
        color: white;
      }
    }
    .qian {
      width: 120px;
      height: 48px;
      margin-left: 20px;
      text-align: center;
      .qian1 {
        font-size: 24px;
        color: white;
      }
      .qian2 {
        font-size: 13px;
        color: white;
      }
    }
  }
  .right {
    width: 120px;
    height: 48px;
    color: white;
    font-size: 18px;
    background-color: rgb(83, 83, 86);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.content {
  padding: 16px 16px 160px;
}
.gouwu {
  display: flex;
}
</style>